<template>
    <div class="home">
        <dv-full-screen-container>
            <div style="display: flex;justify-content: space-between;">
                <dv-decoration-8 style="width:30%;height:6vh;" />
                <div class="title" style="width:45%;">殡仪馆业务调度中心 <span class="title-span">{{ nowDate }}</span></div>
                <dv-decoration-8 :reverse="true" style="width:30%;height:6vh;" />
            </div>
            
            <div style="height: 60vh;box-sizing: border-box;padding: 0.5vh 0.5vw;display: flex;justify-content: space-between;">
                <!-- 最左侧边框 -->
                <div style="box-sizing: border-box;width:40%; height: 100%; ">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height:100%;">
                        <div class="tip">
                            <div>车辆GPS</div>
                            <div class="common-margin">运行：{{gpsyx}}</div>
                            <div class="common-margin">停止：{{gpsjz}}</div>
                            <div class="common-margin">离线：{{gpslx}}</div>
                        </div>
                        <div class="map-box">
                            <div id="mapDiv" class="mapClass"></div>
                        </div>
                    </dv-border-box-12>
                </div>

                <!-- 中间边框 -->
                <div style="box-sizing: border-box;width:35%; height: 100%; padding: 0 10px;">
                    <dv-border-box-12 style="width:100%;height:50%">
                        <div class="tip">
                            <div>本月出车任务统计</div>
                        </div>
                        <dv-capsule-chart :config="config1" style="height:75%;box-sizing: border-box;padding: 0 1vw;" />
                    </dv-border-box-12>
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 50%">
                        <div class="tip">
                            <div>本月殡葬车统计</div>
                        </div>
                        <div class="by-bzc-tj" style="height: 80%; ">
                            <div class="by-bzc-tj-border by-bzc-tj-border-color-1">
                                <div>行驶</div>
                                <div>{{bzc[0].je}}公里</div>
                            </div>
                            <div class="by-bzc-tj-border  by-bzc-tj-border-color-2">
                                <div>遗体接送车</div>
                                <div>{{bzc[1].je}}公里</div>
                            </div>
                            <div class="by-bzc-tj-border  by-bzc-tj-border-color-3">
                                <div>配送车</div>
                                <div>{{bzc[2].je}}公里</div>
                            </div>
                            <div class="by-bzc-tj-border  by-bzc-tj-border-color-4">
                                <div>出车次数</div>
                                <div>{{bzc[3].je}}次</div>
                            </div>
                            <div class="by-bzc-tj-border  by-bzc-tj-border-color-5">
                                <div>遗体接送车</div>
                                <div>{{bzc[4].je}}次</div>
                            </div>
                            <div class="by-bzc-tj-border  by-bzc-tj-border-color-6">
                                <div>配送车</div>
                                <div>{{bzc[5].je}}次</div>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
                
                <!-- 最右侧边框 -->
                <div style="box-sizing: border-box;width:25%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 40%">
                        <div class="tip">
                            <div>本月遗体情况</div>
                        </div>
                        <div class="by-yt-qk" style="height: 80%;">
                            <div class="by-yt-qk-text-1">遗体登记 {{ytdj[0].je}}具</div>
                            <div class="by-yt-qk-text-2">正常死亡 {{ytdj[1].je}}具</div>
                            <div class="by-yt-qk-text-3">非正常死亡 {{ytdj[2].je}}具</div>
                        </div>
                    </dv-border-box-12>
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 60%;">
                        <div class="tip">
                            <div>本月火化情况</div>
                        </div>
                        <div class="by-yt-qk">
                            <div class="by-yt-qk-text-1" style="height: 10%;">火化登记</div>
                        </div>
                        <dv-charts :option="option3" style="height:65%;"/>
                    </dv-border-box-12>
                </div>
            </div>
            <div style="height: 34vh;box-sizing: border-box;padding: 0.5vh 0.5vw;display: flex;justify-content: space-between;">
                <div style="box-sizing: border-box;width:15%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        <div class="tip">
                            <div>本月结尊费用统计</div>
                        </div>
                        <!-- <div style="color: rgb(105, 207, 168);">合计 1278562元</div> -->
                        <dv-active-ring-chart :config="config6" style="width:100%;height:75%" />
                    </dv-border-box-12>
                </div>
                <div style="box-sizing: border-box;width:65%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        <div class="tip">
                            <div>死亡统计/本月服务统计</div>
                        </div>
                        <div class="swtj-byfwtj" style="height: 85%;">
                            <div>
                                <div style="color: rgb(105, 207, 168);">死亡年龄统计</div>
                                <dv-active-ring-chart :config="config3" style="width:100%;height:85%" />
                            </div>
                            <div>
                                <div style="color: rgb(105, 207, 168);">乡镇统计</div>
                                <dv-active-ring-chart :config="config4" style="width:100%;height:85%" />
                            </div>
                            <div>
                                <div style="color: rgb(105, 207, 168);">死亡原因统计</div>
                                <dv-active-ring-chart :config="config5" style="width:100%;height:85%" />
                            </div>
                            <div>
                                <div style="color: rgb(105, 207, 168);">火化炉统计</div>
                                <dv-active-ring-chart :config="config2" style="width:100%;height:85%" />
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
                <!-- <div style="box-sizing: border-box;width:25vw; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        <div class="tip">
                            <div>本月考勤统计</div>
                        </div>
                        <dv-charts :option="option1" style="height: 75%;" />
                    </dv-border-box-12>
                </div> -->
                <div style="box-sizing: border-box;width:20%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        <div class="tip">
                            <div>党组学习统计</div>
                        </div>
                        <dv-scroll-board :config="config9" style="height:75%;box-sizing: border-box;padding: 0 1vw;"/>
                    </dv-border-box-12>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script>
 
// import { getNtytjyApi } from '@/request/apis'
import { getJjGPSApi, getJjbyhhApi, getJjswnlApi, getJjswyyApi, getJjswxzApi, getJjhhlApi, getJjgbtApi, getJjltApi, getJjccrwApi, getJjytdjApi, getJjbzctjApi, getJjjsfyApi } from '@/request/apis'
export default {
    name: 'Home',
    data() {
        return {
            nowDate: '',
            map: '',
            option1: {
                // title: {
                //     text: '本月考勤统计',
                //     style: {
                //         fill: '#fff',
                //         fontSize: 17,
                //         fontWeight: 'bold',
                //         textAlign: 'center',
                //         textBaseline: 'bottom'
                //     }
                // },
                legend: {
                    // data: ['正常考勤', '迟到', '早退', '旷工']
                    textStyle: {
                        fontFamily: 'Arial',
                        fontSize: 13,
                        fill: '#fff',
                    },
                    textUnselectedStyle: {
                        fontFamily: 'Arial',
                        fontSize: 13,
                        fill: '#999'
                    },
                    data: [
                        {
                            name: '正常考勤',
                            color: 'rgb(5, 211, 206)',
                        },
                        {
                            name: '迟到',
                            color: 'rgb(0, 126, 244)'
                        },
                        {
                            name: '早退',
                            color: 'rgb(174, 102, 174)'
                        },
                        {
                            name: '旷工',
                            color: 'rgb(251, 106, 44)'
                        },
                    ]
                },
                xAxis: {
                    // name: '科室',
                    axisLabel: {
                        style: {
                            fill: '#fff',
                            fontSize: 10,
                            rotate: 0
                        }
                    },
                    nameTextStyle: {
                        fill: '#fff',
                        fontSize: 10
                    },
                    data: ['业务科', '车队', '服务科', '殡仪中心', '财务科', '办公室']
                },
                yAxis: {
                    // name: '次数',
                    data: 'value',
                    nameTextStyle: {
                        fill: '#fff',
                        fontSize: 10
                    },
                    axisLabel: {
                        style: {
                            fill: '#fff',
                            fontSize: 10,
                            rotate: 0
                        }
                    },
                },
                series: [
                    {
                        name: '旷工',
                        data: [100, 100, 30, 40, 50, 60],
                        type: 'bar',
                        // gradient: {
                        //     color: ['#37a2da', '#67e0e3']
                        // },
                        stack: 'a', //@description 数据堆叠 相同stack的series元素的data值将被叠加（后边的值将被叠加在前边的值上）
                        independentColor: true, //独立配色模式,设置为true时，可以配置每一个柱的颜色
                        independentColors: ['rgb(251, 106, 44)'], //仅在启用独立配色模式后生效,默认值与根配置下的color属性相同，用于分别设置每一个柱的颜色,设置二维颜色数组时，将自动应用渐变色独立配色
                    },
                    {
                        name: '早退',
                        data: [80, 50, 30, 40, 50, 60],
                        type: 'bar',
                        // gradient: {
                        //     color: ['#37a2da', '#67e0e3']
                        // },
                        stack: 'a', //@description 数据堆叠 相同stack的series元素的data值将被叠加（后边的值将被叠加在前边的值上）
                        independentColor: true, //独立配色模式,设置为true时，可以配置每一个柱的颜色
                        independentColors: ['rgb(174, 102, 174)'], //仅在启用独立配色模式后生效,默认值与根配置下的color属性相同，用于分别设置每一个柱的颜色,设置二维颜色数组时，将自动应用渐变色独立配色
                    },
                    {
                        name: '迟到',
                        data: [50, 80, 30, 40, 50, 60],
                        type: 'bar',
                        // gradient: {
                        //     color: ['#37a2da', '#67e0e3']
                        // },
                        stack: 'a', //@description 数据堆叠 相同stack的series元素的data值将被叠加（后边的值将被叠加在前边的值上）
                        independentColor: true, //独立配色模式,设置为true时，可以配置每一个柱的颜色
                        independentColors: ['rgb(0, 126, 244)'], //仅在启用独立配色模式后生效,默认值与根配置下的color属性相同，用于分别设置每一个柱的颜色,设置二维颜色数组时，将自动应用渐变色独立配色
                    },
                    {
                        name: '正常考勤',
                        data: [100, 100, 30, 40, 50, 60],
                        type: 'bar',
                        // gradient: {
                        //     color: ['#37a2da', '#67e0e3']
                        // },
                        stack: 'a', //@description 数据堆叠 相同stack的series元素的data值将被叠加（后边的值将被叠加在前边的值上）
                        independentColor: true, //独立配色模式,设置为true时，可以配置每一个柱的颜色
                        independentColors: ['rgb(5, 211, 206)'], //仅在启用独立配色模式后生效,默认值与根配置下的color属性相同，用于分别设置每一个柱的颜色,设置二维颜色数组时，将自动应用渐变色独立配色
                    },
                ]
            },
            option3: {
                // title: {
                //     text: '业务比例',
                //     style: {
                //         fill: '#fff',
                //         fontSize: 17,
                //         fontWeight: 'bold',
                //         textAlign: 'center',
                //         textBaseline: 'bottom'
                //     }
                // },
                series: [
                    {
                        type: 'pie',
                        data: [
                            {
                                name: '',
                                value: 0
                            }
                        ],
                        radius: ['50%', '80%'],
                        // radius: 90,
                        insideLabel: {
                            show: true
                        },
                        outsideLabel: {
                            // 标签线弯曲点与饼状图的间距
                            labelLineBendGap: '5%',
                            // 标签线末端长度
                            labelLineEndLength: 20
                        }
                    }
                ]
            },
            config1: {
                data: [
                    {
                        name: '合计接单',
                        value: 0
                    },
                    {
                        name: '未接受',
                        value: 0
                    },
                    {
                        name: '已接收待出发',
                        value: 0
                    },
                    {
                        name: '已出发',
                        value: 0
                    },
                    {
                        name: '已回馆',
                        value: 0
                    },
                ],
                colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                unit: '数量',
                showValue: true
            },
            config2: {
                data: [
                    {
                        name: '',
                        value: 0
                    },
                ],
                lineWidth: 20, //线条粗细
                digitalFlopStyle: { //数字翻牌器的文字颜色和大小
                    fontSize: 15,
                    fill: '#fff'
                }
            },
            config3: {
                data: [
                    {
                        name: '',
                        value: 0
                    },
                ],
                lineWidth: 20, //线条粗细
                digitalFlopStyle: { //数字翻牌器的文字颜色和大小
                    fontSize: 15,
                    fill: '#fff'
                }
            },
            config4: {
                data: [
                    {
                        name: '',
                        value: 0
                    },
                ],
                lineWidth: 20, //线条粗细
                digitalFlopStyle: { //数字翻牌器的文字颜色和大小
                    fontSize: 15,
                    fill: '#fff'
                }
            },
            config5: {
                data: [
                    {
                        name: '',
                        value: 0
                    },
                ],
                lineWidth: 20, //线条粗细
                digitalFlopStyle: { //数字翻牌器的文字颜色和大小
                    fontSize: 15,
                    fill: '#fff'
                }
            },
            config6: {
                data: [
                    {
                        name: '',
                        value: 0
                    },
                ],
                lineWidth: 20, //线条粗细
                digitalFlopStyle: { //数字翻牌器的文字颜色和大小
                    fontSize: 15,
                    fill: '#fff'
                }
            },
            config9: {
                header: ['姓名', '学习时长', '点阅次数'],
                data: [
                ],
                rowNum: 5,
                // index: true,
                columnWidth: [100, 120],
                align: ['center', 'center', 'center'],
                headerBGC: 'rgba(47, 98, 151, 0.5)',
                // oddRowBGC: '#505458',
                // oddRowBGC: '#003B51',
                oddRowBGC: 'rgba(0, 59, 81, 0.5)',
                // evenRowBGC: '#222b34',
                evenRowBGC: 'rgba(34, 43, 52, 0.5)',
            },
           
            gpsyx: '',
            gpsjz: '',
            gpslx: '',
            timer: '',
            
            ytdj: [
                {
                    name: '遗体登记',
                    je: '0'
                },
                {
                    name: '正常死亡',
                    je: '0'
                },
                {
                    name: '非正常死亡',
                    je: '0'
                },
            ],
            bzc: [
                {
                    name: '行驶',
                    je: '0'
                },
                {
                    name: '遗体接送车',
                    je: '0'
                },
                {
                    name: '配送车',
                    je: '0'
                },
                {
                    name: '出车次数',
                    je: '0'
                },
                {
                    name: '遗体接送车',
                    je: '0'
                },
                {
                    name: '配送车',
                    je: '0'
                },
            ]
        }
    },
    
    mounted() {
        //地图
        this.getJjGPS()
    },
    created() {    
        this.nowDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
        this.getCarYuyue();
        this.getJjbyhh();
        this.getJjswnl();
        this.getJjswyy();
        this.getJjswxz();
        this.getJjccrw();
        this.getJjytdj();
        this.getJjbzctj();
        this.getJjhhl();
        this.getJjjsfy();
         
        
        this.timer = setInterval(() => {
            this.nowDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
            this.getCarYuyue();
            this.getJjbyhh();
            this.getJjswnl();
            this.getJjswyy();
            this.getJjswxz();
            this.getJjccrw();
            this.getJjytdj();
            this.getJjbzctj();
            this.getJjhhl();
            this.getJjjsfy();
            this.getJjGPS()
        }, 1000*60)
    },
    beforeDestroy() {
        console.log('beforeDestroy')
        clearInterval(this.timer)
    },
    methods: {
        getJjGPS() {
            getJjGPSApi().then((res) => {
                // clxx      //车辆状态
                // cph      //车牌号
                // lat       //经度
                // lng      //纬度
                // lx        //离线
                // jz        //静止
                // yx       //运行
                console.log(res)
                let arr = res.data.data
                this.gpsyx = res.data.gpsyx
                this.gpsjz = res.data.gpsjz
                this.gpslx = res.data.gpslx
                setTimeout(() => {
                    this.mapInit(arr)
                }, 1000);
            })
        },
        getCarYuyue(){
            // getNtytjyApi().then(data=>{
            //     let data_=data.data.data
            //     let datas=[];
            //     for(let i=0;i<data_.length;i++){
            //         let sz_ex3=data_[i].sz_ex3;
            //         let address=data_[i].address;
            //         let sfpc=data_[i].sfpc;
            //         let dat4=data_[i].dat4;
            //         let d_=[];
            //         d_.push(sz_ex3);
            //         d_.push(address);
            //         d_.push(sfpc);
            //         datas.push(d_);
            //     }
            //     this.config9.data=datas;
            //     this.config9 = {...this.config9}
            // });
        }, 
        getJjbyhh(){
            getJjbyhhApi().then(data=>{
             
                let data_=data.data.data;
                let datas=[];
                for(let i=0;i<data_.length;i++){
                    let d={
                        name:data_[i].name,
                        value:Number(data_[i].je)
                    }
                    datas.push(d);
                }
               this.option3.series[0].data=datas;
               this.option3 = {...this.option3}
            });
        },
        getJjswnl(){
            getJjswnlApi().then(data=>{
                let data_=data.data.data
                let datas=[];
                for(let i=0;i<data_.length;i++){
                    let d={
                        name:data_[i].name,
                        value:Number(data_[i].je)
                    }
                    datas.push(d);
                }
                this.config3.data=datas;
                this.config3 = {...this.config3}
            });
        },
        getJjswyy(){
            getJjswyyApi().then(data=>{
                let data_=data.data.data
                let datas=[];
                for(let i=0;i<data_.length;i++){
                    let d={
                        name:data_[i].name,
                        value:Number(data_[i].je)
                    }
                    datas.push(d);
                }
                this.config5.data=datas;
                this.config5 = {...this.config5}
            });
        },
        getJjswxz(){
            getJjswxzApi().then(data=>{
                let data_=data.data.data
                let datas=[];
                for(let i=0;i<data_.length;i++){
                    let d={
                        name:data_[i].name,
                        value:Number(data_[i].je)
                    }
                    datas.push(d);
                }
                this.config4.data=datas;
                this.config4 = {...this.config4}
            });
        },
        getJjccrw(){
            getJjccrwApi().then(data=>{
                let data_=data.data.data
                let datas=[];
                for(let i=0;i<data_.length;i++){
                    let d={
                        name:data_[i].name,
                        value:Number(data_[i].je)
                    }
                    datas.push(d);
                }
                this.config1.data=datas;
                this.config1 = {...this.config1}
            });
        },
        getJjytdj(){
            getJjytdjApi().then(data=>{
               this.ytdj = data.data.data
            });
        },
        getJjbzctj(){
            getJjbzctjApi().then(data=>{
                this.bzc = data.data.data
            });
        },
        getJjhhl(){
            getJjhhlApi().then(data=>{
                let data_=data.data.data
                let datas=[];
                for(let i=0;i<data_.length;i++){
                    let d={
                        name:data_[i].name,
                        value:Number(data_[i].je)
                    }
                    datas.push(d);
                }
                this.config2.data=datas;
                this.config2 = {...this.config2}
            });
        },
        getJjjsfy(){
            getJjjsfyApi().then(data=>{
                let data_=data.data.data
                let datas=[];
                for(let i=0;i<data_.length;i++){
                    let d={
                        name:data_[i].name,
                        value:Number(data_[i].je)
                    }
                    datas.push(d);
                }
                this.config6.data=datas;
                this.config6 = {...this.config6}
            });
        },
        mapInit(contentArr) {
            if (!this.map) {
                //缩放级别
                let zoom = 9;
                //初始化地图对象
                this.map = new T.Map('mapDiv');

                //设置显示地图的中心点和级别
                this.map.centerAndZoom(new T.LngLat(120.906657,32.037648), zoom);
            }

            // //创建标注对象
            // let marker = new T.Marker(new T.LngLat(116.411794, 39.9068));
            // //向地图上添加标注
            // map.addOverLay(marker);

            // let infoWin1 = new T.InfoWindow();
            // let sContent =
            //     "<div>电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
            //     "</div>";
            // infoWin1.setContent(sContent);
            // marker.addEventListener("click", function () {
            //     marker.openInfoWindow(infoWin1);
            // });// 将标注添加到地图中

            // let contentArr = [
            //     {
            //         gcm_ex11: 119.928421,
            //         gcm_ex12: 32.46165,
            //         gcm_ex1: '公墓名称1',
            //         gcm_ex4: '电话',
            //         gcm_ex2: '公墓地址',
            //         gcm_ex29: '总墓穴数',
            //         gcm_ex30: '已售墓穴数',
            //         gcm_ex31: '可售墓穴数',
            //         gcm_ex3: '联系人',
            //     },
            //     {
            //         gcm_ex11: 119.828421,
            //         gcm_ex12: 32.46165,
            //         gcm_ex1: '公墓名称2',
            //         gcm_ex4: '电话',
            //         gcm_ex2: '公墓地址',
            //         gcm_ex29: '总墓穴数',
            //         gcm_ex30: '已售墓穴数',
            //         gcm_ex31: '可售墓穴数',
            //         gcm_ex3: '联系人',
            //     }
            // ]
            //向地图上删除标注
            this.map.clearOverLays();
            contentArr.forEach((item, index) => {
                //创建标注对象
                let marker = new T.Marker(new T.LngLat(item.lat, item.lng));
                //向地图上添加标注
                this.map.addOverLay(marker);
                let infoWin1 = new T.InfoWindow();
                
                let sContent =
                    `<div>车辆信息: ${item.clxx} <br>车牌号码: ${item.cph} ` +
                    `</div>`;
                infoWin1.setContent(sContent);
                marker.addEventListener("click", function () {
                    marker.openInfoWindow(infoWin1);
                });// 将标注添加到地图中
            })
            // 设置地图样式
            this.map.setStyle('indigo')

        },
    }
}
</script>
<style lang="scss" scoped>
    .home {
        width: 100vw;
        height: 100vh;
        background-image: url('@/assets/bg7.png');
        background-size: 100% 100%;
    }
    .title {
        color: rgb(188, 220, 224);
        font-weight: bold;
        font-size: 30px;
        position: relative;
        .title-span {
            position: absolute;
            font-size: 20px;
            font-weight: normal;
            padding-left: 30px;
            padding-top: 15px;
        }
    }
    .tip {
        text-align: left;
        padding: 1vh 0.5vw;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        :nth-child(1) {
            font-size: 18px;
            font-weight: bold;
        }
    }
    .tip::before{
        content: '';
        background-color: rgb(24 124 183);
        border: 0.2vw solid rgb(24 124 183);
        height: 2.3vh;
        border-radius: 0.2vw;
        margin-right: 0.5vw;
        box-sizing: border-box;
    }
  
    .common-margin {
        padding: 0 1vw;
    }
    .map-box {
        width: 100%;
        //height: 220px;
        height: 88%;
        box-sizing: border-box;
        padding: 0 1vw 0 1vw;
    }
    .mapClass {
        width: 100%;
        height: 100%;
        // height: 260px;
    }
    // 本月殡葬车统计
    .by-bzc-tj {
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-items: center;
        .by-bzc-tj-border {
            width: 85%;
            height: 60%;
            border: 1px solid #fff;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .by-bzc-tj-border-color-1 {
            color: rgb(89, 133, 87);
            box-sizing: border-box;
            border: 1px solid rgb(89, 133, 87);
        }
        .by-bzc-tj-border-color-2 {
            color: rgb(111, 156, 242);
            box-sizing: border-box;
            border: 1px solid rgb(111, 156, 242);
        }
        .by-bzc-tj-border-color-3 {
            color: rgb(114, 124, 256);
            box-sizing: border-box;
            border: 1px solid rgb(114, 124, 256);
        }
        .by-bzc-tj-border-color-4 {
            color: rgb(73, 164, 223);
            box-sizing: border-box;
            border: 1px solid rgb(73, 164, 223);
        }
        .by-bzc-tj-border-color-5 {
            color: rgb(18, 226, 98);
            box-sizing: border-box;
            border: 1px solid rgb(18, 226, 98);
        }
        .by-bzc-tj-border-color-6 {
            color: rgb(162, 154, 199);
            box-sizing: border-box;
            border: 1px solid rgb(162, 154, 199);
        }
    }
    .by-yt-qk {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        .by-yt-qk-text-1 {
            width: 85%;
            padding: 10px;
            box-sizing: border-box; 
            border: 1px solid rgb(179, 185, 206);
            color: rgb(178, 184, 223);
        }
        .by-yt-qk-text-2 {
            width: 85%;
            padding: 10px;
            box-sizing: border-box; 
            color: rgb(146, 180, 173);
        }
        .by-yt-qk-text-3 {
            width: 85%;
            padding: 10px;
            box-sizing: border-box; 
            color: rgb(230, 210, 121);
        }
    }
    .swtj-byfwtj {
        display: flex;
        & > div {
            width: 33.3%;
        }
    }
</style>